import React, { useState, useEffect } from 'react'
import { Toast, NavBar } from 'react-vant';
import { useNavigate, useParams, useLocation } from 'react-router-dom'
import { Image } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { ActionBar } from 'react-vant';

interface DEULEDATE {
  user?: string;
  id?: string;
  title?: string;
  img?: string;
  city?: string;
}

export default function Car() {
  const location = useLocation()
  const navigate = useNavigate()
  const [imgData, setimgData] = useState<DEULEDATE>({})
  useEffect(() => {
    setimgData(location.state as DEULEDATE)
  }, [])

  useEffect(() => {

  }, [imgData])


  return (
    <div>
     
        <NavBar
          title="标题"
          leftText="返回"
          onClickLeft={() => navigate(-1)}

        />
  

   
        <div className="demo-image">
          <Image width="100" height="100" src={imgData.img} />
          <p>{imgData.user}</p>
          <p>{imgData.id}</p>
          <p>{imgData.user}</p>
          <p>{imgData.title}</p>
          <p>{imgData.city}</p>
        </div>

        
        <div className='demo-action-bar'>
      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} text="客服" onClick={() => console.log('chat click')} />
        <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() => console.log('cart click')} />
        <ActionBar.Icon icon={<ShopO />} text="店铺" onClick={() => console.log('shop click')} />
        <ActionBar.Button type="danger" text="立即购买" onClick={() => console.log('button click')} />
      </ActionBar>
    </div>

      
    </div>
  )
}
